/*
 * @Author: Yxliam
 * @Date: 2023-12-12 16:59:16
 * @LastEditors: Yxliam
 * @LastEditTime: 2023-12-15 17:23:27
 * @Description: 
 */
/*
 * @Author: Yxliam
 * @Date: 2023-12-12 16:59:16
 * @LastEditors: Yxliam
 * @LastEditTime: 2023-12-15 15:39:04
 * @Description:
 */
import React, {useState} from 'react';
import {
  createBottomTabNavigator,
  BottomTabBarProps,
} from '@react-navigation/bottom-tabs';
// import {HomeOutline} from '@fruits-chain/icons-react-native';
import {TransitionPresets} from '@react-navigation/stack';
import {
  Text,
  View,
  StyleSheet,
  TouchableOpacity,
  Image,
  Modal,
  Animated,
  TouchableHighlight,
  Dimensions,
  Alert,
  TouchableWithoutFeedback,
} from 'react-native';
import {activeColor} from '../../common/color';
import {p} from '../../utils/pxToDp';
import MyHome from '../myhome';
import MyMine from '../mymine';
import Public from '../public';
import {globalLoading} from '../../components';
import { CurvedBottomBarExpo } from 'react-native-curved-bottom-bar';
import Ionicons from 'react-native-vector-icons/Ionicons';
import icon_image from '../../assets/icon_tab_publish.png';
import icon1 from '../../assets/0qr.png';
import icon2 from '../../assets/5RG.png';

const screenWidth = Dimensions.get('window').width;
const Tabs = () => {
  const [modalVisible, setModalVisible] = useState(false);
  const [type, setType] = useState<'DOWN' | 'UP'>('DOWN');

  const toggleModal = () => {
    setModalVisible(!modalVisible);
  };

  const onPublishPress = () => {
    if (type === 'UP') {
      setType('DOWN');
    } else {
      setType('UP');
    }
    // toggleModal()
    // globalLoading.show()
    // setTimeout(() => {
    //   globalLoading.hide()
    // }, 2000)
  };


  const _renderIcon = (routeName:string, selectedTab:string) => {
    let icon = '';

    switch (routeName) {
      case 'title1':
        icon = 'home';
        break;
      case 'title2':
        icon = 'person';
        break;
    }

    return (
      <Ionicons
        name={icon}
        size={25}
        color={routeName === selectedTab ? '#8857EC' : 'gray'}
      />
    );
  };

  const renderTabBar = (props:any) => {
    let { routeName, selectedTab, navigate } = props
    return (
      <TouchableOpacity
        onPress={() => navigate(routeName)}
        style={styles.tabbarItem}
      >
        {_renderIcon(routeName, selectedTab)}
      </TouchableOpacity>
    );
  };


  return (
    <View style={styles.root}>
      <CurvedBottomBarExpo.Navigator
        type={type}
        style={styles.bottomBar}
        shadowStyle={styles.shawdow}
        height={55}
        circleWidth={50}
        screenOptions={{ headerShown: false, }}
        bgColor="white"
        initialRouteName="title1"
        borderTopLeftRight
        renderCircle={({ selectedTab, navigate }) => (
          <Animated.View style={[type === 'DOWN' ? styles.btnCircle : styles.btnCircleUp]}>
            <TouchableOpacity
              style={styles.button}
              onPress={()=>{
                if (type === 'UP') {
                  setType('DOWN');
                } else {
                  setType('UP');
                }
                navigate('Public')
              }}
            >
              <Ionicons name={'add-circle'} color="#8857EC" size={50} />
            </TouchableOpacity>
          </Animated.View>
        )}
        tabBar={renderTabBar}
      >
        <CurvedBottomBarExpo.Screen
          name="title1"
          options={{
            headerShown: false,
          }}
          position="LEFT"
          component={() => <MyHome />}
        />
        <CurvedBottomBarExpo.Screen
          name="title2"
          options={{
            headerShown: false,
          }}
          component={() => <MyMine />}
          position="RIGHT"
        />
      </CurvedBottomBarExpo.Navigator>
     
    </View>
  );
};

const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: '100%',
  },
  container: {
    flex: 1,
    padding: 20,
  },
  shawdow: {
    shadowColor: '#DDDDDD',
    shadowOffset: {
      width: 0,
      height: 0,
    },
    shadowOpacity: 1,
    shadowRadius: 5,
  },
  button: {
    flex: 1,
    justifyContent: 'center',
  },
  bottomBar: {},
  btnCircle: {
    width: 60,
    height: 60,
    borderRadius: 30,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'white',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.2,
    shadowRadius: 1.41,
    elevation: 1,
    bottom: 28,
  },
  btnCircleUp: {
    width: 60,
    height: 60,
    borderRadius: 30,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'white',
    // backgroundColor: '#E8E8E8',
    bottom: 30,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.2,
    shadowRadius: 1.41,
    elevation: 1,
  },
  imgCircle: {
    width: 30,
    height: 30,
    tintColor: 'gray',
  },
  tabbarItem: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  img: {
    width: 30,
    height: 30,
  },
  screen1: {
    flex: 1,
    backgroundColor: '#BFEFFF',
  },
  screen2: {
    flex: 1,
    backgroundColor: '#FFEBCD',
  },
  publish:{
    width:50,
    height:50
  }
});

export default Tabs;
